<template>
    <div class="order_management_container">
        <el-tabs v-model="activeName" class="tabs_box" @tab-click="handleClick">
            <el-tab-pane label="订单列表" name="OrderList">
                <OrderList ref="OrderListRef" :active-name="activeName" />
            </el-tab-pane>
            <el-tab-pane label="待审核订单" name="OrderReviewed">
                <OrderReviewed ref="OrderReviewedRef" :active-name="activeName" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
// 定义name专用script标签
// eslint-disable-next-line vue/component-definition-name-casing
export default defineComponent({ name: 'SALESLEADS_SALESMANAGEMENT_ORDER_MANAGEMENT' });
</script>

<script setup lang="tsx">
import { ref } from 'vue';
import OrderList from './components/OrderList.vue';
import OrderReviewed from './components/OrderReviewed.vue';
const activeName = ref('OrderList');
const OrderListRef = ref<any>(null);
const OrderReviewedRef = ref<any>(null);
const handleClick = (tab: any, event: Event) => {
    tab.paneName == 'OrderList' && OrderListRef.value.reloadTable();
    tab.paneName == 'OrderReviewed' && OrderReviewedRef.value.reloadTable();
};
</script>

<style lang="scss" scoped>
.order_management_container {
    padding: 24px;
    padding-top: 10px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
}

.tabs_box {
    :deep(.el-tabs__item) {
        color: #969696;
    }

    :deep(.is-active) {
        font-weight: 600;
        color: #ff6b00;
    }
}
</style>
